<!--  -->
<template>
<div class='user-list'>
   <el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item><a href="/">用户管理</a></el-breadcrumb-item>
  <el-breadcrumb-item>用户列表</el-breadcrumb-item>
</el-breadcrumb>
    <el-card class="box-card">
        <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane :label="item.name" :name="item.name" v-for="item in tablistData" :key="item.leval"></el-tab-pane>
  </el-tabs>
        <el-table
        :data="tableData.data"
        border
        style="width: 100%">
        <el-table-column
        fixed
        prop="id"
        label="序号"
        width="150">
        </el-table-column>
        <el-table-column
        prop="username"
        label="姓名"
        width="100">
        </el-table-column>
        <el-table-column
        prop="phone"
        label="手机号"
        width="120">
        </el-table-column>
        <el-table-column
        prop="sex"
        label="性别"
        width="40">
        </el-table-column>
        <el-table-column
        prop="address"
        label="地址"
        width="300">
        </el-table-column>
        <el-table-column
        prop="age"
        label="年龄"
        width="40">
        </el-table-column>
        <el-table-column
        prop="email"
        label="邮箱"
        width="200">
        </el-table-column>
         <el-table-column
        prop="leval"
        label="等级"
        width="120">
         <template slot-scope="scope">
            <div>{{scope.row.leval==0?'管理员':scope.row.leval==1?'青铜':scope.row.leval==2?'白银':scope.row.leval==3?'黄金':scope.row.leval==4?'铂金':scope.row.leval==5?'钻石':''}}</div>
        </template>
        </el-table-column>
        <el-table-column
        prop="is_show"
        label="是否开启"
        width="120">
         <template slot-scope="scope">
           <el-switch
            v-model="scope.row.is_show"
            active-value="1"
            active-text='开'
            inactive-text="关"
            inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949">
            </el-switch>
        </template>
        </el-table-column>
        <el-table-column
        prop="create_time"
        label="时间"
        >
        </el-table-column>
        <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small" @click="editData(scope.row)">编辑</el-button>
        </template>
        </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.count">
    </el-pagination>
  </el-card>
  <!--编辑的弹框 -->
  <el-dialog :title="title" :visible.sync="dialogFormVisible">
  <el-form :model="form" :rules="rules" ref="ruleForm">
    <el-form-item label="电子邮箱" :label-width="formLabelWidth"  prop="email">
      <el-input v-model="form.email" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
      <el-input v-model.number="form.age" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitData('ruleForm')">确 定</el-button>
  </div>
</el-dialog>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import tools from '@/utils/tool'
import { editList } from '@/api/user'
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('年龄不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if (value < 18) {
              callback(new Error('必须年满18岁'));
            } else {
              callback();
            }
          }
        }, 1000);
      };
      var checkEmail = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('邮箱不能为空'));
        }
        setTimeout(() => {
            if (!tools.regEmail.test(value)) {
              callback(new Error('邮箱格式不正确'));
            } else {
              callback();
            }
        }, 1000);
      };
return {
        page:1,
        size:5,
        currentPage4: 1,
        activeName: '全部',
        leval:0,
        dialogFormVisible:false,
         form: {
          email:'',
          age:''
        },
        formLabelWidth: '120px',
        title:'编辑',
        tablistData:[
            {
                leval:'0',
                name:'全部'
            },
             {
                leval:'1',
                name:'青铜段位'
            },
             {
                leval:'2',
                name:'白银段位'
            },
             {
                leval:'3',
                name:'黄金段位'
            },
             {
                leval:'4',
                name:'铂金段位'
            },
             {
                leval:'5',
                name:'钻石段位'
            }
        ],
        rules: {
          email: [
            { validator: checkEmail, trigger: 'blur' }
          ],
          age: [
            { validator: checkAge, trigger: 'blur' }
          ]
        }

};
},
//监听属性 类似于data概念
computed: {
    tableData(){
        return this.$store.state.user.userListData
    }
},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    getUserListData(){
        let that = this;
        that.$store.dispatch('actChangeUserListData',{page:that.page,size:that.size,leval:this.leval})
    },
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.size =val
        this.page = 1;
        this.getUserListData()
      },
    handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
          this.page = val;
        this.getUserListData()
    },
    handleClick(tab, event) {
        console.log(tab, event);
        this.leval = this.tablistData[tab.index].leval
        console.log(' this.leval', this.leval)
        this.page = 1;
        this.getUserListData()
      },
      editData(data){
        let that = this;
        that.dialogFormVisible = true
        console.log('data',data)
        that.form =data
      },
      submitData(formName){
        let that = this;
         this.$refs[formName].validate((valid) => {
          if (valid) {
            editList(this.form).then(res=>{
            console.log('res',res)
            if(res.data.status==200){
                that.getUserListData()
                that.dialogFormVisible = false
            }
        })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
        
      }
},
beforeCreate() {}, //生命周期 - 创建之前
//生命周期 - 创建完成（可以访问当前this实例）
created() {
    this.getUserListData()
},
beforeMount() {}, //生命周期 - 挂载之前
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
   
},
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less">
.user-list{
    .el-breadcrumb{
        margin-bottom: 20px;
   }
   .el-pagination{
    margin-top:20px
   }
}

</style>